
import { Tabs, Radio } from 'antd';

import "./index.less"
import style from "./index.less"

const { TabPane } = Tabs;


const Btnbgview = (props) => {
    let { items } = props
    items = items == undefined ? [] : items
    return (
        <div className={style.btnbg} style={{ ...props.style, height: '100%', display: 'flex', flexDirection: 'column', marginRight: 2 }}>
            <div style={{ flex: 1, flexDirection: 'column', alignItems: 'center' }}>
                {
                    items.map((obj, idx) => {
                        return (
                            <div style={{ color: '#4b6da7', textAlign: 'center', overflow: 'hidden', marginTop: 5 }}>{obj}</div>
                        )
                    })
                }
            </div>
            <div style={{ height: 20, paddingBottom: 3, display: "flex", justifyContent: 'center', alignItems: 'center', color: '#4b6da7' }}>
                {props.title == undefined ? "" : props.title}
            </div>
        </div>
    )
}


const Menu = () => {
    let size = "small"
    return (
        <div>
            <Tabs defaultActiveKey="1" type="card" size={size}>
                <TabPane className={style.szw} tab="电子病例模板维护" key="1">
                    <Tabs defaultActiveKey="1" type="card" size={size}>
                        <TabPane className={style.szw} tab="文件" key="1-1">
                            <div style={{ height: 110, display: 'flex', backgroundColor: '#d8e6f6', paddingLeft: 3, paddingRight: 3, borderBottom: "solid 1px #c6c6c6" }}>
                                <Btnbgview style={{ width: 90 }} title="文件" items={["另存为PDF", "另存为图片"]} />
                                <Btnbgview style={{ width: 100 }} title="结构模板" items={["新建结构模板", "保持结构模板"]} />
                                <Btnbgview style={{ width: 100 }} title="页面设置" items={["页面设置"]} />
                            </div>
                        </TabPane>
                        <TabPane className={style.szw} tab="编辑" key="1-2">
                            <div style={{ height: 110, display: 'flex', backgroundColor: '#d8e6f6', paddingLeft: 3, paddingRight: 3 }}>
                                <Btnbgview style={{ width: 90 }} title="编辑" items={["另存为PDF", "另存为图片"]} />
                                <Btnbgview style={{ width: 100 }} title="结构模板" items={["新建结构模板", "保持结构模板"]} />
                                <Btnbgview style={{ width: 100 }} title="页面设置" items={["页面设置"]} />
                            </div>
                        </TabPane>
                        <TabPane className={style.szw} tab="试图" key="1-3">
                            <div style={{ height: 110, display: 'flex', backgroundColor: '#d8e6f6', paddingLeft: 3, paddingRight: 3 }}>
                                <Btnbgview style={{ width: 90 }} title="试图" items={["另存为PDF", "另存为图片"]} />
                                <Btnbgview style={{ width: 100 }} title="结构模板" items={["新建试图", "保持试图"]} />
                            </div>
                        </TabPane>
                        <TabPane className={style.szw} tab="表格" key="1-4">
                            <div style={{ height: 110, display: 'flex', backgroundColor: '#d8e6f6', paddingLeft: 3, paddingRight: 3 }}>
                                <Btnbgview style={{ width: 90 }} title="表格" items={["另存为PDF", "另存为图片"]} />
                                <Btnbgview style={{ width: 170 }} title="表格样式" items={["新建表格样式", "保持表格样式"]} />
                            </div>
                        </TabPane>
                    </Tabs>

                </TabPane>
                <TabPane tab="病例配置" key="2">
                    <div style={{ height: 110, display: 'flex', backgroundColor: '#d8e6f6', paddingLeft: 3, paddingRight: 3 }}>
                    </div>

                </TabPane>
                <TabPane tab="知识库维护" key="3">
                    <div style={{ height: 110, display: 'flex', backgroundColor: '#d8e6f6', paddingLeft: 3, paddingRight: 3 }}>
                    </div>
                </TabPane>
            </Tabs>
        </div>
    )
}

import { Row, Col, Input, Space, Table } from "antd"
import React from 'react';

const InputTableItem = (props) => {
    let { label } = props
    return (
        <Space>
            <div style={{ padding: '0 5px' }}>{label + ':'}</div>
            <Input placeholder={label} />
        </Space>
    )
}

const PageBody = (props) => {
    let { } = props

    let colums = [
        { title: '日期' },
        { title: '项目名称' },
        { title: '医师签字' },
        { title: '患者签字' },
    ]
    let datas = [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
    ]

    return (
        <div style={{ flex: 1, backgroundColor: "#bdd1e8", padding: '30px 102px', overflowY: 'auto', whiteSpace: 'pre-wrap' }}>
            <div style={{ height: 3500, backgroundColor: '#ffffff', padding: "77px 110px", }}>
                <Row>
                    <Col span={24}>
                        <div style={{ height: 35, display: 'flex', alignItems: 'center', padding: 12 }}>
                            <InputTableItem label="患者姓名"></InputTableItem>
                            <InputTableItem label="性别"></InputTableItem>
                            <InputTableItem label="年龄"></InputTableItem>
                            <InputTableItem label="住院号"></InputTableItem>
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <div style={{ height: 35, display: 'flex', alignItems: 'center', padding: 12 }}>
                            <InputTableItem label="科别"></InputTableItem>
                            <InputTableItem label="床号"></InputTableItem>
                            <InputTableItem label="临床诊断"></InputTableItem>
                        </div>
                    </Col>
                </Row>
                <Table columns={colums} dataSource={datas} pagination={false} />
            </div>
        </div>
    )
}

class PageBody2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dom: []
        }
    }

    render() {
        let { dom } = this.state

        return (
            <div>
                <button onClick={() => {
                    let el = `<div contentEditable="false" style="height: 200px;background-color: #ff0000;"></div>`
                    dom.push(el)
                    this.setState({ dom });

                }}>添加红色块</button>
                <button onClick={() => {
                    let el = `<table>
                    <tr>
                        <td>01</td>
                        <td>02</td>
                        <td>03</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                    </tr>
                    <tr>
                        <td>12</td>
                        <td>22</td>
                        <td>23</td>
                    </tr>
                </table>`
                    dom.push(el)
                    this.setState({ dom });

                }}>添加table</button>
                <button onClick={() => {
                    let el = `<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.PAVk0mcGFzykf7fKS_KC9gHaKw?w=200&h=291&c=7&o=5&pid=1.7" style="width: 200px;height: 200px;" alt="" srcset="">`
                    dom.push(el)
                    this.setState({ dom });

                }}>添加图片</button>

                <div contentEditable style={{ backgroundColor: '#f5f5f5', minHeight: 350, outline: 'none', padding: 12 }}
                    dangerouslySetInnerHTML={{ __html: dom.join("") }}
                >
                </div>
            </div>
        );
    }
}



const Page = (props) => {

    return (
        <div style={{ ...props.style, display: 'flex', flexDirection: 'column', height: '100%' }}>
            <Menu />
            <PageBody2 />
        </div>
    )
}


export default Page;